<template>
	<view class="page-container">
		
		<view class="table-view-group" v-if="recordList.length">
			<view class="table-cell-bar" v-for="item in recordList" :key="item.id" @click="jumpDetail(item.id)">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">
						<view class="name" v-if="item.way === 'bank'">银行卡提现</view>
						<view class="name" v-if="item.way === 'alipay'">支付宝提现</view>
						<view class="name" v-if="item.way === 'weixin'">微信提现</view>
						<view class="date">{{item.addtime}}</view>
					</view>
					<view class="table-cell-block__fd">
						<view class="num">-{{item.withdrawamount}}</view>
						<view class="status">
							<text class="ing" v-if="item.status == 0">提现中</text>
							<text class="end" v-if="item.status == 1">完成</text>
							<text class="end" v-if="item.status == 2">失败</text>
							<text class="iconfont">&#xe67f;</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="more" v-if="recordList.length"></uni-load-more>
		
		<st-empty-msg noMsg="'暂无提现记录'" :showHande="false"  v-if="hasRecord"></st-empty-msg>
		
	</view>
</template>

<script>
	var page = 1,
		pagesize = 10;
	
	export default {
		components: {
			
		},
		data() {
			return {
				recordList: [],
				hasRecord: false,
				more: 'noMore'
			}
		},
		onLoad() {
			page = 1;
			this.getCashRecord()
		},
		onReachBottom() {
			this.getCashRecord()
		},
		methods: {
			
			// 获取提现记录
			async getCashRecord(){
				let params, cashRes;
				params = {
					method: "api/v2/member/bag/withdraw_record",
					page,
					page_size: pagesize
				}
				cashRes = await this.$http(params);
				this.more = 'loading';
				if(cashRes.status){
					this.recordList = [...this.recordList, ...cashRes.data.list];
					if(this.recordList.length > 0){
						this.hasRecord = false
					}else{
						this.hasRecord = true
					}
					if(cashRes.data.list.length < pagesize){
						this.more = 'noMore'
					}
					page++
				}else{
					uni.showToast({
						title: cashRes.msg,
						icon: "none"
					})
				}
			},
			
			// 提现详情
			jumpDetail(id){
				uni.navigateTo({
					url: `./detail?id=${id}`
				})
			}
			
		}
	}
</script>

<style lang="scss">

	.table-view-group{
		background-color: $uni-bg-color;
	}
	.table-cell-bar{
		padding: 0 20rpx;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 0;
			left: 0;
			bottom: 0;
			height: 1px;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: $uni-border-color;
		}
		&:last-child:after{
			display: none;
		}
	}
	.table-cell-block{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		&__hd{
			flex: 0 0 auto;
			font-size: $uni-font-size-base;
			.name{
				font-size: 26rpx;
			}
			.date{
				color: #acacac;
				margin-top: 12rpx;
				font-size: 20rpx;
			}
		}
		&__fd{
			flex: 0 0 auto;
			text-align: right;
			.num{
				font-size: 32rpx;
				font-weight: bold;
				font-family: Arial, Helvetica, sans-serif;
			}
			.status{
				margin-top: 8rpx;
				font-size: 20rpx;
				.ing{
					color: $uni-text-color-price;
				}
				.end{
					color: #bebebe;
				}
			}
			.iconfont{
				margin-left: 6rpx;
				margin-top: -6rpx;
				vertical-align: middle;
				font-size: 28rpx;
			}
		}
	}
	

</style>
